<template>
    <div class="panel-details" :class="bgIndex > 0 ? '' : args.layoutConfig.themeIndex ">
        <img :src="'static/images/bg' + bgIndex + '.png'" class="zl-panel-bg" v-if="bgIndex > 0" />
        <div  class="multi-label title-area" :class="{'zl-show-bg': bgIndex > 0}">
            <div class="f-l">
                <slot name="left"></slot>
            </div>
            <Button v-if="panelDisplayList.length > 0 && item.name != ''"   v-for="(item,index) in panelDisplayList" :key="index"
                :class="{'button-background': item.uuid==panelDisplayIndex}" @click="jumpPanel(item,index)">{{item.name}}</Button>
            <div class="f-r">
                <slot name="right"></slot>
            </div>
        </div>
        <panel-layout  class="layout-content" :class="{'zl-show-bg': bgIndex > 0}" v-if="args.showList!=null" :layoutList="args.showList" :config="args.layoutConfig"
            :panelDisplayIndex="panelDisplayIndex">
            <graph-panel  v-if="item.tagIndex == panelDisplayIndex"  v-for="(item,index) in args.showList" :key="index" :slot="item.item.graphId" :graph-type="item.item.graphType"
                :graph-options="item.item.graphOptions"  :paneltype="'edit'" :video-src="item.url"  :datasource="item.item.datasource" :config="args.layoutConfig" :graph-switch="true"></graph-panel>
        </panel-layout>
    </div>
</template>

<script>

import getData from 'getData'
import util from 'util'
import panelLayout from './panel-layout.vue'
import graphPanel from './../../../components/panels/graph-panel.vue'

export default {
    components:{
        panelLayout,graphPanel
    },
    props:{
        panelId:{
            type: String
        }
    },
    data(){
        return{
            args:{
                layoutConfig:{themeIndex :'default'},
            },
            panelDisplayList:[],
            panelDisplayIndex:'',
            bgIndex: -1
        }
    },
    methods:{
        queryElementList(){
            getData.get('queryLayoutId',{},this.panelId).then((res) => {
                if (res.status == 200 && res.data.code == '000') {
                    var onePanel = res.data.data;
                    onePanel.config = JSON.parse(onePanel.config);
                    this.args = Object.assign({}, onePanel.config.showConfig);
                    if (!this.args.layoutConfig) {
                      this.args.layoutConfig = {themeIndex :'default'}
                    }
                    let bgIndex = onePanel.config.config.bgIndex
                    this.bgIndex = bgIndex || -1
                    let showList = []
                    if (onePanel.config.showConfig) {
                      showList = onePanel.config.showConfig.showList
                    }
                    let tempList = []
                    // 移除栅格，拼接所有图形用于展示
                    for (let i = 0; i < showList.length; i++) {
                        const show = showList[i];
                        if (show.type === 'grid') {
                            for (let j = 0; j < show.items.length; j++) {
                                const item = show.items[j];
                                if (item.image) {
                                    tempList.push(item.image)
                                }
                            }
                        } else {
                            tempList.push(show)
                        }
                    }
                    this.args.showList = tempList
                    this.panelDisplayList = onePanel.config.showTag;
                    if(this.panelDisplayList && this.panelDisplayList.length > 0){
                        for(var i = 0 ; i < this.panelDisplayList.length; i++){
                            if(this.panelDisplayList[i].status == 'selected'){
                                this.panelDisplayIndex = this.panelDisplayList[i].uuid
                            }else if(this.panelDisplayList[i].status == null){
                                this.panelDisplayIndex = this.panelDisplayList[0].uuid
                            }
                        }
                    }
                    // this.panelDisplayIndex = this.panelDisplayList[0].uuid
                }else{
                    this.$Message.error("查询面板信息失败!");
                }
            });
        },
        jumpPanel(item,index){
            this.panelDisplayIndex = item.uuid;
        },
    },
    mounted(){
        this.queryElementList();
    }
}
</script>

<style lang="less">
.panel-details{

    .multi-label{
        position: relative;
        text-align: center;
        overflow: hidden;
    }
    .button-background{
        background:#224792;
        color: white;
    }
}

</style>


